<template>
  <view class="page">

    <!-- 背景 -->
    <image class="page-bg" mode="widthFix" :src="imageUrl +'list/g-bg.jpg'"></image>

    <!-- 头部 -->
    <u-sticky offset-top="0" :bgColor="bgColor">
      <u-navbar leftText="现在预约" title=" " @rightClick="rightClick" :autoBack="true" placeholder
                :safeAreaInsetTop="true" :bgColor="bgColor"></u-navbar>
    </u-sticky>

    <!-- 主内容 -->
    <view class="page-content boxHome-hg1">
      <view class="form-hg3">
        <form action="">
          <view class="wp">
            <view class="form-item">
              <view class="label">预约时段</view>
              <view class="date">
                <view class="input" :class="datePopShow1?'on':''" @click="datePopShow1=true">
                  <u-input
                      placeholder="开始时间"
                      placeholderStyle="font-size:28rpx;color: rgba(28, 39, 76, 0.6);"
                      customStyle="padding: 0; background:transparent; borderRadius:20rpx; height:88rpx;"
                      border="none"
                      disabled
                      v-model="datePopValRs1">
                  </u-input>
                  <image class="arrow" mode="widthFix" :src="imageUrl + 'hg-arrow2.png'"></image>
                </view>
                <em></em>
                <view class="input" :class="datePopShow2?'on':''" @click="datePopShow2=true">
                  <u-input
                      placeholder="结束时间"
                      placeholderStyle="font-size:28rpx;color: rgba(28, 39, 76, 0.6);"
                      customStyle="padding: 0; background:transparent; borderRadius:20rpx; height:88rpx;"
                      border="none"
                      disabled
                      v-model="datePopValRs2">
                  </u-input>
                  <image class="arrow" mode="widthFix" :src="imageUrl + 'hg-arrow2.png'"></image>
                </view>
              </view>
            </view>
            <view class="form-item">
              <view class="label">车牌号</view>
              <view class="input" :class="pickerPopShow1?'on':''" @click="pickerPopShow1=true">
                <u-input
                    placeholder="请选择车牌号"
                    placeholderStyle="font-size:28rpx;color: rgba(28, 39, 76, 0.6);"
                    customStyle="padding: 0; background:transparent; borderRadius:20rpx; height:88rpx;"
                    border="none"
                    disabled
                    v-model="pickerPopValRs1">
                </u-input>
                <image class="arrow" mode="widthFix" :src="imageUrl + 'hg-arrow2.png'"></image>
              </view>
            </view>

            <view class="form-item" v-if="false">
              <view class="label">手机号</view>
              <view class="tel">
                <view class="input" @click="pickerPopShow2=true">
                  <u-input
                      placeholder=""
                      placeholderStyle="font-size:28rpx;color: rgba(28, 39, 76, 0.6);"
                      customStyle="padding: 0; background:transparent; borderRadius:20rpx; height:88rpx;"
                      border="none"
                      disabled
                      v-model="pickerPopValRs2">
                  </u-input>
                  <image class="arrow" mode="widthFix" :src="imageUrl + 'hg-arrow2.png'"></image>
                </view>
                <u-input
                    placeholder="请输入手机号"
                    placeholderStyle="font-size:28rpx;color: rgba(28, 39, 76, 0.6);"
                    customStyle="padding: 0; background:transparent; borderRadius:20rpx; height:88rpx;"
                    border="none"
                    type="number"
                    v-model="phoneVal1">
                </u-input>
              </view>
            </view>
          </view>
        </form>
      </view>
    </view>

    <!-- 底部 -->
    <view class="fot-hg1">
      <view class="wp">
        <!--<view class="a1" @click="go('/pages/parkingReservationPayment/parkingReservationPayment')">点击预约</view>-->
        <view class="a1" @click="saveGuest">点击预约</view>
      </view>
    </view>


    <!-- 日期弹窗 -->
    <u-datetime-picker
        :show="datePopShow1"
        v-model="datePopVal1"
        mode="datetime"
        closeOnClickOverlay
        @confirm="confirm1"
        @cancel="cancel"
        @close="close"
    ></u-datetime-picker>
    <u-datetime-picker
        :show="datePopShow2"
        v-model="datePopVal2"
        mode="datetime"
        closeOnClickOverlay
        @confirm="confirm2"
        @cancel="cancel"
        @close="close"
    ></u-datetime-picker>

    <!-- 车牌号弹窗 -->
    <u-picker
        :show="pickerPopShow1"
        :columns="list1"
        @confirm="confirm3"
        @cancel="cancel"
        @close="close"
    ></u-picker>

    <!-- 手机号区号弹窗 -->
    <u-picker
        :show="pickerPopShow2"
        :columns="list2"
        @confirm="confirm4"
        @cancel="cancel"
        @close="close"
    ></u-picker>

  </view>

</template>

<script>
import {get, postForm} from "../../api/myHttps";

export default {
  data() {
    return {
      // 头部背景色
      bgColor: 'transparent',

      // 日期
      datePopShow1: false,
      datePopVal1: Number(new Date()),
      datePopValRs1: '',

      datePopShow2: false,
      datePopVal2: Number(new Date()),
      datePopValRs2: '',

      // 车牌号
      pickerPopShow1: false,
      pickerPopValRs1: '',
      list1: [
        ['鄂E·E12345', '鄂E·E12345', '鄂E·E12345', '鄂E·E12345', '鄂E·E12345', '鄂E·E12345', '鄂E·E12345', '鄂E·E12345']
      ],

      // 手机号
      phoneVal1: '',
      pickerPopShow2: false,
      pickerPopValRs2: '+86',
      list2: [
        ['+86', '+86', '+86', '+86', '+86', '+86', '+86', '+86']
      ],

      item: {},
    }
  },
  onLoad(options) {
    this.item = JSON.parse(decodeURIComponent(options.item));
    console.log(this.item);

    this.getPlates();
  },
  methods: {
    saveGuest() {
      let url = '/city-mobile/user/saveGuest';
      let data = {
        ownerId: uni.getStorageSync("ownerId"),
        parkId: this.item.id,
        plate: this.pickerPopValRs1,
        start: this.datePopValRs1 + ':00',
        end: this.datePopValRs2 + ':00',
        memo: '',
      };
      console.log(data);
      postForm(url, data).then(res => {
        console.log(res);
        uni.showToast({
          title: '预约成功',
          icon: 'none',
          duration: 2000
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          });
        }, 2000);
      })
    },
    getPlates() {
      this.list1 = [[]];
      // 获取车牌
      let ownerId = uni.getStorageSync("ownerId");
      get('/city-mobile/plate/bindPlate/' + ownerId).then((res) => {
        console.log(res);
        if (res.length > 0) {
          this.pickerPopValRs1 = res[0].plate;
          res.forEach((item, index) => {
            if (this.list1[0].indexOf(item.plate) < 0) {
              this.list1[0].push(item.plate);
            }
          });
        }
      })
    },
    // 头部滚动
    onPageScroll(res) {
      if (res.scrollTop >= 60) {
        this.bgColor = '#ffffff'
      } else {
        this.bgColor = 'transparent'
      }
    },
    go(url) {
      uni.navigateTo({
        url: url
      })
    },
    result(time, mode) {
      const timeFormat = uni.$u.timeFormat
      switch (mode) {
        case 'datetime':
          return timeFormat(time, 'yyyy-mm-dd hh:MM')
        case 'date':
          return timeFormat(time, 'yyyy-mm-dd')
        case 'year-month':
          return timeFormat(time, 'yyyy-mm')
        case 'time':
          return time
        default:
          return ''
      }
    },
    close() {
      this.datePopShow1 = false
      this.datePopShow2 = false
      this.pickerPopShow1 = false
      this.pickerPopShow2 = false
    },
    cancel() {
      this.datePopShow1 = false
      this.datePopShow2 = false
      this.pickerPopShow1 = false
      this.pickerPopShow2 = false
    },
    // 开始时间弹窗
    confirm1(e) {
      this.datePopShow1 = false
      this.datePopValRs1 = this.result(e.value, e.mode)
    },
    // 结束时间弹窗
    confirm2(e) {
      this.datePopShow2 = false
      this.datePopValRs2 = this.result(e.value, e.mode)
    },
    // 车牌号弹窗
    confirm3(e) {
      this.pickerPopShow1 = false
      this.pickerPopValRs1 = e.value[0]
    },
    // 手机区号弹窗
    confirm4(e) {
      this.pickerPopShow2 = false
      this.pickerPopValRs2 = e.value[0]
    },
  }
}
</script>

<style lang="scss">

page {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 148rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 148rpx);
}

.page {
  min-height: calc(100vh - env(safe-area-inset-bottom) - 148rpx);
}

</style>
